<template>
  <div class="editForm-wrapper" >
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="editVisible">
      <el-form label-width="110px" ref="editForm" :model="editForm">

      <!--  <el-form-item label="选择租户" prop="tenantIds" :rules="[
                              {required: true, message:'请选择租户', trigger:'blur'}
                             ]">
          <el-select clearable v-model="editForm.tenantIds"  placeholder="请选择">
            <el-option v-for="item in tenantSelectListData" :key="item.value" :label="item.label" :value="item.value">

            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="页面选择" prop="pageHref" :rules="[
                              {required: true, message:'请选择统计页面', trigger:'blur'}
                             ]">
          <el-select clearable v-model="editForm.pageHref"  placeholder="请选择">
            <el-option v-for="item in statisticsPage"  :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号" prop="version" :rules="[
                              {required: true, message:'请选择版本号', trigger:'blur'}
                             ]">
          <el-select clearable v-model="editForm.version"  placeholder="请选择版本号">
            <el-option v-for="item in $dictUtils.getDictList('statisticsPageVersion')" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="页面背景" prop="bgColor" :rules="[
                              {required: true, message:'请选择统计模型', trigger:'blur'}
                             ]">
          <el-select clearable v-model="editForm.bgColor"  placeholder="请选择">
            <el-option   label="浅色" :value="1"></el-option>
            <el-option   label="深色" :value="2">
           </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="简要说明" prop="remark" >
          <el-input  maxlength="30" type="textarea" :rows="2" placeholder="请输入关联菜单，多个用逗号分割" v-model="editForm.remark">
          </el-input>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
          <el-button size="small" @click="close()">取消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    save,
    getById
  } from '@/api/StatisticsPage.js'
import {
    getStatisticsSelectList
  } from '@/api/StatisticsModel.js'
import {
    getSelectList
  } from '@/api/tenant/tenant.js'

export default {
    components: {},
    data () {
      return {
        loading: false,
        areaLabel: {},
        method: '',
        statisticsPage: [],
        title: '新增页面',
        statisticsSelectListData: [],
        tenantSelectListData: [],
        editForm: {
          version: this.$dictUtils.getDictList('statisticsPageVersion')[0].value,
          pageHref: '',
          bgColor: 1,
          remark: ''
        },
        editVisible: false,
version: this.$dictUtils.getDictList('statisticsPageVersion')[0].value,
          pageHref: this.$dictUtils.getDictList('statisticsPage')[0].value,
        detailsVisible: false,
        tableData1: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        dialogVisible: false,
        query: ''
      }
    },
    methods: {
      select (e) {
        this.editForm.companyName = e.names
        this.editForm.companyId = e.id
        this.dialogVisible = false
      },
      init (method, pages) {
        if (method === 'add') {
          this.editVisible = true
          this.$nextTick(() => {
            this.$refs.editForm.resetFields()
             this.statisticsPage = JSON.parse(JSON.stringify(this.$dictUtils.getDictList('statisticsPage')))
             this.statisticsPage.forEach((item, i) => {
               this.$set(item, 'disabled', false)
             })
             for (var i = 0; i < pages.length; i++) {
               for (var j = 0; j < this.statisticsPage.length; j++) {
                 if (pages[i].pageHref == this.statisticsPage[j].value) {
                   this.statisticsPage[j].disabled = true
                 }
               }
             }

            this.editForm.pageHref = '',
            this.editForm.version = this.$dictUtils.getDictList('statisticsPageVersion')[0].value
            this.editForm.bgColor = 1
          })

          // this.editForm.tenantIds.push(this.tenantSelectListData[0].value)

          this.title = '新增'
          this.visible = true
          this.loading = false
        }
      },
      // 获取列表带分页
      getStatisticsSelectList () {
        this.loading = true
        getStatisticsSelectList({}).then((res) => {
          if (res.data.code === '200') {
            this.statisticsSelectListData = res.data.result
          }
          this.loading = false
        })
      },
      getSelectList () {
        this.loading = true
        getSelectList({}).then((res) => {
          if (res.data.code === '200') {
            this.tenantSelectListData = res.data.result
          }
          this.loading = false
        })
      },
      close () {
        this.editVisible = false
      },
      doSubmit () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            save(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    },
    mounted () {
      this.getStatisticsSelectList()
      this.getSelectList()
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog {
    .el-form {
      .el-input__inner {
        width: 320px;
      }

      .inputAppend-wrapper {
        .el-input__inner {
          width: 282px;
        }
      }
    }
  }
</style>
